<template>
  <el-dialog
    v-model="dialogVisable"
    :title= "getTitle(auditLogInfo.url)"
    :append-to-body="true"
    @close="closeDialog"
    :destroy-on-close="true"
    width="800"
  >
    <el-tabs type="border-card">
      <el-tab-pane
        v-for="(item, index) in tabPanel"
        :label="i18n.global.t(item.text)"
        :key="index"
      >
        <el-descriptions :column="1" border v-if="index == 0">
          <el-descriptions-item
            label-class-name="label"
            :label="$t('AbpAuditLogging[\'HttpStatusCode\']')"
            >{{ auditLogInfo.httpStatusCode }}</el-descriptions-item
          >

          <el-descriptions-item
            label-class-name="label"
            :label="$t('AbpAuditLogging[\'HttpMethod\']')"
            >{{ auditLogInfo.httpMethod }}</el-descriptions-item
          >

          <el-descriptions-item
            label-class-name="label"
            :label="$t('AbpAuditLogging[\'Url\']')"
            >{{ auditLogInfo.url }}</el-descriptions-item
          >
          <el-descriptions-item
            label-class-name="label"
            :label="$t('AbpAuditLogging[\'ClientIpAddress\']')"
            >{{ auditLogInfo.clientIpAddress }}</el-descriptions-item
          >
          <el-descriptions-item
            label-class-name="label"
            :label="$t('AbpAuditLogging[\'ClientName\']')"
            >{{ auditLogInfo.clientName }}</el-descriptions-item
          >
          <el-descriptions-item
            label-class-name="label"
            :label="$t('AbpAuditLogging[\'UserName\']')"
            >{{ auditLogInfo.userName }}</el-descriptions-item
          >
          <el-descriptions-item
            label-class-name="label"
            :label="$t('AbpAuditLogging[\'ExecutionTime\']')"
            >{{
              moment(auditLogInfo.executionTime).format("YYYY-MM-DD HH:mm:ss")
            }}</el-descriptions-item
          >
          <el-descriptions-item
            label-class-name="label"
            :label="$t('AbpAuditLogging[\'ExecutionDuration\']')"
            >{{ auditLogInfo.executionDuration }}</el-descriptions-item
          >
          <el-descriptions-item
            label-class-name="label"
            :label="$t('AbpAuditLogging[\'BrowserInfo\']')"
            >{{ auditLogInfo.browserInfo }}</el-descriptions-item
          >

          <el-descriptions-item
            label-class-name="label"
            :label="$t('AbpAuditLogging[\'Exceptions\']')"
            >{{ auditLogInfo.exceptions }}</el-descriptions-item
          >

          <el-descriptions-item
            label-class-name="label"
            :label="$t('AbpAuditLogging[\'Comments\']')"
            >{{ auditLogInfo.comments }}</el-descriptions-item
          >
          <el-descriptions-item
            label-class-name="label"
            :label="$t('AbpAuditLogging[\'ExtraProperties\']')"
            >{{ auditLogInfo.extraProperties }}</el-descriptions-item
          >
        </el-descriptions>
        <template
          v-if="index == 1 && auditLogInfo.actions && auditLogInfo.actions.length > 0"
        >
          <el-collapse>
            <el-collapse-item
              v-for="(actionItem, index) in auditLogInfo.actions"
              :title="actionItem.serviceName"
              :name="actionItem.serviceName"
            >
              <el-descriptions :column="1" border>
                <el-descriptions-item
                  label-class-name="label"
                  :label="$t('AbpAuditLogging[\'MethodName\']')"
                  >{{ actionItem.methodName }}</el-descriptions-item
                >
                <el-descriptions-item
                  label-class-name="label"
                  :label="$t('AbpAuditLogging[\'ExecutionTime\']')"
                  >{{ moment(actionItem.executionTime).format('YYYY-MM-DD HH:mm:ss') }}</el-descriptions-item
                >
                <el-descriptions-item
                  label-class-name="label"
                  :label="$t('AbpAuditLogging[\'ExecutionDuration\']')"
                  >{{ actionItem.executionDuration }}</el-descriptions-item
                >
                <el-descriptions-item
                  label-class-name="label"
                  :label="$t('AbpAuditLogging[\'Parameters\']')"
                  >{{ actionItem.parameters }}</el-descriptions-item
                >
                <el-descriptions-item
                  label-class-name="label"
                  :label="$t('AbpAuditLogging[\'ExtraProperties\']')"
                  >{{ actionItem.extraProperties }}</el-descriptions-item
                >
              </el-descriptions>
            </el-collapse-item>
          </el-collapse>
        </template>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
<script setup lang="ts">
import moment from "moment";
import { getAuditLogById } from "@/api/identity/logs/auditlog/index";
import i18n from "@/lang/index";
const props = defineProps({
  auditId: {
    type: String,
    default: null,
  },
});
const tabPanel = ref<object[]>([
  {
    name: "detail",
    text: "AbpAuditLogging['Detail']",
  },
  {
    name: "action",
    text: "AbpAuditLogging['Actions']",
  },

]);
const dialogVisable = ref<boolean>(true);
const emit = defineEmits(["closedialogevent"]);
const closeDialog = () => {
  dialogVisable.value = false;
  emit("closedialogevent", dialogVisable.value);
};
const auditLogInfo = ref<object>({});
const getTitle=(urlStr:string)=>{
  return `${urlStr}-详情`;
}
onMounted(async () => {
  auditLogInfo.value = await getAuditLogById(props.auditId);
  console.log("auditid:", auditLogInfo.value);
});
</script>
<style type="sass">
.label {
  width: 120px;
  font-weight: 800 !important;
}
</style>
